/** 
* 流程实例
 */
<template>
    <vp-dialog ref="dialogRef">
    <template #title>
        <vp-label zh="流程实例" en="Process Instance" align="left"/>
    </template>
    <el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
        <vp-search-row >
            <vp-search-col>
                <el-form-item prop="keyword">
                    <template #label><vp-label-keyword/></template>
                    <el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
                </el-form-item>
            </vp-search-col>
            <vp-search-col btn-col>
                <vp-btn-search :loading="loading" @click="handleSearch"/>
                <vp-btn-reset @click="handleSearchReset"/>
            </vp-search-col>
        </vp-search-row>
    </el-form>    
    <vp-table
        v-loading="loading"
        :data="tableData" 
        @sort-change="handleSortChange"
        :height="`calc(100vh - 450px)`"
        ref="multipleTable" stripe border  style="width: 100%" row-key="id">
        <el-table-column align="center" label="#" type="index">
        </el-table-column>
        
        <el-table-column
            sortable="custom"
            prop="abr.title"
            show-overflow-tooltip
            min-width="250"
        >
            <template #header><vp-label zh="任务描述" en="Task Desc"/></template>
            <template #default="scope">
                <span v-html="markTextColor(searchForm.keyword, scope.row.title)" />
            </template>
        </el-table-column>
        <el-table-column
            prop="userName"
            width="120"
        >
            <template #header><vp-label zh="发起人" en="Start User"/></template>
        </el-table-column>
        <el-table-column
            sortable="custom"
            prop="ahp.START_TIME_"
            width="160"
        >   
            <template #header><vp-label zh="开启时间" en="Start Time"/></template>
            <template #default="{row}">
                {{ row.startTime }}
            </template>
        </el-table-column>
        <el-table-column
            sortable="custom"
            prop="ahp.END_TIME_"
            width="160"
        >
            <template #header><vp-label zh="结束时间" en="End Time"/></template>
            <template #default="{row}">
                {{ row.endTime }}
            </template>
        </el-table-column>
        <el-table-column
            prop="state"
            width="220"
        >
        <template #header><vp-label zh="流程状态" en="Process State"/></template>
        </el-table-column>
        <el-table-column
            prop="state"
            min-width="250"
        >
            <template #header><vp-label zh="节点名称" en="Node Name"/></template>
            <template #default="{row}">
                <p v-for="item in row.userTaskList" :key="item.id">
                    <span>{{ item.name }} [<el-link type="primary" @click="handleChangeAssignee(item)">{{ item.userName||$t('item.pleaseChoose') }}</el-link>]</span>
                </p>
            </template>
        </el-table-column>
        <el-table-column
            :label="$t('item.operation')"
        >
        <template #header>
            <vp-label-operations/>
        </template>
            <template #default="{row}">
                <vp-btn-cancel text v-if="row.state == 'ACTIVE'" @click="handleCancel(row)"/>
            </template>
        </el-table-column>
    </vp-table>
    <vp-pagination
        @change="loadDataList"
        :total="page.total" 
        v-model:currentPage="page.pageNum"
        v-model:pageSize="page.pageSize"
    >
    </vp-pagination>
<UserDialog ref="userDialogRef"></UserDialog>
</vp-dialog>
</template>
<script setup lang="ts" name='ProcessInstance'>
import { defineAsyncComponent, reactive, ref, watch } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import { useI18n } from 'vue-i18n';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';

const UserDialog = defineAsyncComponent(() => import('/@/components/vp/User/VpUserDialog.vue'));

const {t} = useI18n();
const procDefKey = ref("");
const loading = ref(false);
const page = reactive({
		...DEFAULT_PAGE,
	})
const searchForm = ref({
    keyword: "",
});

const tableData = ref([]);

/**
 * 加载数据
 */
const loadDataList = ()=>{
    loading.value = true
    request.get('/workflow/instance/list', {
        params: {
            processDefKey: procDefKey.value,
            ...searchForm.value,
            ...page,
        }
    }).then(res => {
        tableData.value = res?.data?.list || [];
        page.total = res?.data?.total || 0;
        page.pageNum = res?.data?.pageNum || 1;
    }).finally(()=>{
        loading.value = false;
    })
}

const userDialogRef = ref();

/**
 * 管理员指定节点办理人
 * @param row 
 */
const handleChangeAssignee = (row: any) =>{
	userDialogRef.value.handleOpen({
		type: 1, // 1、选择人员t_user 2、选择档案b_p3_001
		multi: false,    // 是否多选
		//selected: state.formData.sqrdaid, // 默认选中人员id
		callback: (data: any) => {
			if(data && data.yhid){
				request.post('/workflow/change/assignee',{
					taskId: row.id,
					assignee: data.yhid,
				}).then(()=>{
					loadDataList()
				}).catch(()=>{

				})
			}
		}
	})
}

watch(()=>[page.pageNum, page.pageSize], ()=>{
    loadDataList();
})

const handleSearch = ()=>{
	if(page.pageNum == 1){
		loadDataList();
	}else{
		page.pageNum = 1;
	}
}
const searchFormRef = ref();
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

const handleSortChange = (column: any)=>{
	page.sortColumn = column.prop;
	page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
	loadDataList()
}

const dialogRef = ref();
const handleOpen = (procDefKey_: string)=>{
    tableData.value = [];
    procDefKey.value = procDefKey_;
    dialogRef.value.handleOpen();
    loadDataList();
}

const handleCancel = (row: any) =>{
    VpMessageBox.confirmDelete().then(()=>{
        request.post(`/workflow/cancel/${row.id}`).then(res => {
            loadDataList();
        })
    });
}

// eslint-disable-next-line no-undef
defineExpose({
    handleOpen,
})
</script>
<style scoped lang="scss">

</style>